<template>
    <div class="flex flex-row p-4 items-end shadow-xl w-full DOUYU-Font">
        <div class="text-3xl mx-4 cursor-default">江夏尧小站</div>
        <router-link class="nagavite" :to="{ name: 'SnippetsSearch' }">
            代码片段搜索</router-link
        >
        <router-link class="nagavite" :to="{ name: 'quickDeliver' }">
            项目导航
        </router-link>
        <router-link class="nagavite" :to="{ name: 'NodeBook' }">
            Node Book
        </router-link>
        <div class="flex-grow"></div>
        <div></div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    computed: {
        ...mapState({
            userInfo: (state) => state.user.user.info,
        }),
    },
};
</script>

<style lang="less" scoped>
.nagavite {
    @apply px-4  transition  hover:bg-gray-100 rounded mx-4;
    transition: background-position 0.5s;
    background-position: 0 150%;
}
@color: #e0f5ff;
.router-link-active {
    color: black;
    overflow: visible;
    background-image: linear-gradient(0, @color, @color);
    background-position: 0 110%;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}
</style>
